<div [formGroup]="group" class="input-group">

    <input ngbDatepicker class="form-control" #datepicker="ngbDatepicker"
           [class.is-invalid]="showErrorMessages"
           [displayMonths]="model.getAdditional('displayMonths', config['displayMonths'])"
           [firstDayOfWeek]="model.getAdditional('firstDayOfWeek', config['firstDayOfWeek'])"
           [formControlName]="model.id"
           [id]="id"
           [maxDate]="model.max"
           [minDate]="model.min"
           [name]="model.name"
           [navigation]="model.getAdditional('navigation', config['navigation'])"
           [ngClass]="getClass('element', 'control')"
           [outsideDays]="model.getAdditional('outsideDays', config['outsideDays'])"
           [placeholder]="model.placeholder"
           [placement]="model.getAdditional('placement', 'bottom-left')"
           [showWeekNumbers]="model.getAdditional('showWeekNumbers', config['showWeekNumbers'])"
           [startDate]="model.focusedDate"
           [weekdays]="model.getAdditional('weekdays', config['weekdays'])"
           (blur)="onBlur($event)"
           (dateSelect)="onCustomEvent($event, 'dateSelect')"
           (closed)="onCustomEvent($event, 'closed')"
           (change)="onChange($event)"
           (focus)="onFocus($event)">

    <div class="input-group-append">

        <button class="btn btn-outline-secondary" type="button" (click)="datepicker.toggle()">

            <img *ngIf="model.toggleIcon" [src]="model.toggleIcon" style="cursor: pointer;"/>
            <span *ngIf="model.toggleLabel">{{ model.toggleLabel }}</span>

        </button>

    </div>

</div>
